<template>
  <el-dialog v-if="load" :close-on-click-modal="false" title="预估销量系数设置" v-model="visible" append-to-body width="660px" :z-index="2000" @close="handleClose">
    <el-form label-position="top">
      <strong class="text-right mr-2 text-sm text-gray-500 leading-8">加权平均日销量</strong>
      <div class="flex flex-col gap-y-4 mb-4">
        <div class="flex items-center">
          <VGroup>
            <el-form-item label-width="0" class="mb-0" :error="errors['data.1.start']">
              <el-input-number v-model="form.data[1].start" :controls="false" :min="0" :step="1" :precision="0"
                class="w-20" />
            </el-form-item>
            <div class="v-group-item">-</div>
            <el-form-item label-width="0" class="mb-0" :error="errors['data.1.end']">
              <el-input-number v-model="form.data[1].end" :controls="false" :min="0" :step="1" :precision="0"
                class="w-20" />
            </el-form-item>
            <div class="v-group-item">天销量</div>
          </VGroup>
          <div class="mx-2">/</div>
          <VGroup>
            <el-form-item label-width="0" class="mb-0" :error="errors['data.1.day']">
              <el-input-number v-model="form.data[1].day" :controls="false" :min="0" :step="1" :precision="0"
                class="w-20" />
            </el-form-item>
            <div class="v-group-item">*</div>
            <el-form-item label-width="0" class="mb-0" :error="errors['data.1.percent']">
              <el-input-number v-model="form.data[1].percent" :controls="false" :min="0" :step="1" :precision="0"
                class="w-20" />
            </el-form-item>
            <div class="v-group-item">%</div>
          </VGroup>
          <div class="mx-2">+</div>
        </div>
        <div class="flex items-center">
          <VGroup>
            <el-form-item label-width="0" class="mb-0" :error="errors['data.2.start']">
              <el-input-number v-model="form.data[2].start" :controls="false" :min="0" :step="1" :precision="0"
                class="w-20" />
            </el-form-item>
            <div class="v-group-item">-</div>
            <el-form-item label-width="0" class="mb-0" :error="errors['data.2.end']">
              <el-input-number v-model="form.data[2].end" :controls="false" :min="0" :step="1" :precision="0"
                class="w-20" />
            </el-form-item>
            <div class="v-group-item">天销量</div>
          </VGroup>
          <div class="mx-2">/</div>
          <VGroup>
            <el-form-item label-width="0" class="mb-0" :error="errors['data.2.day']">
              <el-input-number v-model="form.data[2].day" :controls="false" :min="0" :step="1" :precision="0"
                class="w-20" />
            </el-form-item>
            <div class="v-group-item">*</div>
            <el-form-item label-width="0" class="mb-0" :error="errors['data.2.percent']">
              <el-input-number v-model="form.data[2].percent" :controls="false" :min="0" :step="1" :precision="0"
                class="w-20" />
            </el-form-item>
            <div class="v-group-item">%</div>
          </VGroup>
          <div class="mx-2">+</div>
        </div>
        <div class="flex items-center">
          <VGroup>
            <el-form-item label-width="0" class="mb-0" :error="errors['data.3.start']">
              <el-input-number v-model="form.data[3].start" :controls="false" :min="0" :step="1" :precision="0"
                class="w-20" />
            </el-form-item>
            <div class="v-group-item">-</div>
            <el-form-item label-width="0" class="mb-0" :error="errors['data.3.end']">
              <el-input-number v-model="form.data[3].end" :controls="false" :min="0" :step="1" :precision="0"
                class="w-20" />
            </el-form-item>
            <div class="v-group-item">天销量</div>
          </VGroup>
          <div class="mx-2">/</div>
          <VGroup>
            <el-form-item label-width="0" class="mb-0" :error="errors['data.3.day']">
              <el-input-number v-model="form.data[3].day" :controls="false" :min="0" :step="1" :precision="0"
                class="w-20" />
            </el-form-item>
            <div class="v-group-item">*</div>
            <el-form-item label-width="0" class="mb-0" :error="errors['data.3.percent']">
              <el-input-number v-model="form.data[3].percent" :controls="false" :min="0" :step="1" :precision="0"
                class="w-20" />
            </el-form-item>
            <div class="v-group-item">%</div>
          </VGroup>
        </div>
      </div>
      <el-alert title="说明" type="info" show-icon :closable="false">
        如1-30天销量/30*50%+31-60天销量/30*30%+61-90天销量/30*20%，比例参数根据实际情况填写
      </el-alert>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" :loading="loadings.submit" @click="submit">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { validatorObj } from '@/utils'

const api = inject('api')
const load = ref(false)
const visible = ref(false)
let loadings = reactive({})
const form = ref({ data: { 1: {}, 2: {}, 3: {} } })
const type = inject('type')

const emit = defineEmits(['close', 'success'])

// 打开弹窗
const open = async (selection) => {

  if (!load.value) {
    load.value = true
    await 1
  }
  const is_ids = selection.map(d => d.is_id)
  loadings = reactive({})
  const data = {
    1: {
      start: null,
      end: null,
      day: null,
      percent: null,
    },
    2: {
      start: null,
      end: null,
      day: null,
      percent: null,
    },
    3: {
      start: null,
      end: null,
      day: null,
      percent: null,
    },
  }
  if (selection.length === 1) {
    const item = selection[0].estimate_sale_rule
    for (const key in item) {
      data[key] = item[key]
    }
  }
  form.value = { is_ids, data, type }
  visible.value = true
}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
}

const errors = reactive({})
watch(
  () => form.value.data,
  (data) => {
    for (const key in data) {
      validatorObj('data.' + key, form.value, errors)
    }
  },
  {
    deep: true
  }
)

// 提交
const submit = () => {
  if (Object.values(errors).length) {
    ElMessage.error('校验不通过')
    return
  }
  loadings.submit = true
  api.saleRule(form.value).then(res => {
    ElMessage.success('操作成功')
    emit('success')
    close()
  }).finally(() => {
    loadings.submit = false
  })
}

defineExpose({ open })
</script>